<div class="layui-fluid layui-anim febs-anim" id="febs-rankingStat" lay-title="出版社排行">
  <div class="layui-row febs-container">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div id="ranking-see" style="display: none">
          <span style="padding-left: 20px;font-weight: bolder;font-size: 20px" id="ppp"></span>
          <div class="layui-form" style="margin: 10px 10px 10px 10px">
            <table class="layui-table" lay-skin="line">
              <colgroup>
                <col width="150">
                <col width="150">
                <col width="200">
                <col>
              </colgroup>
              <thead>
              <tr>
                <th>排名</th>
                <th>图书名称</th>
                <th>图书类型</th>
                <th>售出数量</th>
              </tr>
              </thead>
              <tbody id="pubid"></tbody>
            </table>
          </div>
        </div>
        <div class="b1">
          <div class="h">
            <h1>出版社排行统计</h1>
            <div class="showTime">当前时间：2021年1月5-0时54分14秒</div>
            <script>
              var t = null;
              t = setTimeout(time, 1000); //開始运行
              function time() {
                clearTimeout(t); //清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours(); //获取时
                var m = dt.getMinutes(); //获取分
                var s = dt.getSeconds(); //获取秒
                document.querySelector(".showTime").innerHTML =
                    "当前时间：" +
                    y +
                    "年" +
                    mt +
                    "月" +
                    day +
                    "-" +
                    h +
                    "时" +
                    m +
                    "分" +
                    s +
                    "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行
              }
            </script>
          </div>
          <div class="column2">
            <div class="panel1">
              <div class="d1">
                <h3>卖书排行</h3>
                <ul id="sale"></ul>
              </div>
              <div class="d2">
                <h3>退书排行</h3>
                <ul id="back"></ul>
              </div>
              <div class="panel-footer"></div>
            </div>
          </div>
          <div class="mainbox" style="margin-top: 170px">
            <div class="c">
              <div class="panel line">
                <div class="chart r1"></div>
                <div class="panel-footer"></div>
              </div>
            </div>
            <div class="column1">
              <div class="panel bar">
                <div class="chart r2"></div>
                <div class="panel-footer"></div>
              </div>
            </div>
          </div>
        </div>
        <script data-th-inline="none" type="text/javascript">
          layui.use(['jquery'], function () {
            var $ = layui.jquery;
            function f1() {
              $.ajax({
                type: "get",
                url: ctx + 'ranking/line',
                dataType: 'JSON',
                cache: false,
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                  var data = res.data;

                  // 基于准备好的dom，初始化echarts实例
                  var myChart1 = echarts.init(document.querySelector(".r1"));

                  // 2. 指定配置和数据
                  var option = {
                    color: ["#00f2f1", "#ed3f25", "yellow"],
                    title: {
                      text: '出版社流量统计图',
                      left: 'left',
                      top: 6,
                      textStyle: {
                        color: '#ccc',
                        fontSize: 12
                      }
                    },
                    tooltip: {
                      // 通过坐标轴来触发
                      trigger: "axis"
                    },
                    toolbox: {
                      show: true,
                      itemSize: 12,
                      feature: {
                        dataZoom: {
                          yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['bar', 'line']},
                        restore: {},
                        saveAsImage: {}
                      }
                    },
                    legend: {
                      top: "25px",
                      // 距离容器10%
                      right: "10%",
                      // 修饰图例文字的颜色
                      textStyle: {
                        color: "#4c9bfd"
                      }
                      // 如果series 里面设置了name，此时图例组件的data可以省略
                      // data: ["邮件营销", "联盟广告"]
                    },
                    grid: {
                      top: "20%",
                      left: "0%",
                      right: "4%",
                      bottom: "5%",
                      show: true,
                      borderColor: "#012f4a",
                      containLabel: true
                    },
                    xAxis: {
                      type: "category",
                      boundaryGap: false,
                      data: data[0],
                      // 去除刻度
                      axisTick: {
                        show: false
                      },
                      // 修饰刻度标签的颜色
                      axisLabel: {
                        interval: 0,
                        color: "rgba(255,255,255,.7)"
                      },
                      // 去除x坐标轴的颜色
                      axisLine: {
                        show: false
                      },
                    },
                    yAxis: {
                      color: "#012f4a",
                      type: "value",
                      // 去除刻度
                      axisTick: {
                        show: false
                      },
                      // 修饰刻度标签的颜色
                      axisLabel: {
                        color: "rgba(255,255,255,.7)"
                      },
                      // 修改y轴分割线的颜色
                      splitLine: {
                        lineStyle: {
                          color: "#012f4a"
                        }
                      }
                    },
                    series: [
                      {
                        name: "售书",
                        type: "line",
                        // stack: "总量",
                        // 是否让线条圆滑显示
                        smooth: true,
                        data: data[1]
                      },
                      {
                        name: "退书",
                        type: "line",
                        // stack: "总量",
                        smooth: true,
                        data: data[2]
                      },
                    ]
                  };
                  // 3. 把配置和数据给实例对象
                  myChart1.setOption(option);
                  window.addEventListener("resize", function () {
                    myChart1.resize();
                  });
                }
              });
            }

            function f2() {
              // 基于准备好的dom，初始化echarts实例
              var myChart2 = echarts.init(document.querySelector(".r2"));

              option = {
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  top: '2%',
                  left: 'center'
                },
                color: [
                  "#006cff",
                  "#ed8884",
                  "#60cda0",
                  "#ff9f7f",
                  "#0096ff",
                  "#9fe6b8",
                  "#32c5e9",
                  "#1d9dff"
                ],
                series: [
                  {
                    name: '出版社合作次数统计',
                    type: 'pie',
                    radius: ['30%', '65%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                      borderRadius: 20,
                      borderColor: '#C1FFC1',
                      borderWidth: 4
                    },
                    label: {
                      show: false,
                      position: 'right'
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: '14',
                        fontWeight: 'bold',
                      }
                    },
                    labelLine: {
                      show: false
                    },
                    data: []
                  }
                ]
              };
              // 使用刚指定的配置项和数据显示图表。
              myChart2.setOption(option);
              window.addEventListener("resize", function () {
                myChart2.resize();
              });
              var str = [];
              c();

              function c() {
                $.ajax({
                  type: "get",
                  url: ctx + 'vender/pctn',
                  dataType: 'JSON',
                  cache: false,
                  contentType: "application/json;charset=utf-8",
                  success: function (res) {
                    var data = res.data;
                    for (let key in data) {
                      str.push({
                        name: data[key].name,
                        value: data[key].number
                      })
                    }
                    myChart2.setOption({ //加载数据图表
                      series: [{
                        data: str
                      }]
                    });
                  }
                });
                str.length = 0;
              }
            }

            function f3() {
              var str = [];
              $.ajax({
                type: "get",
                url: ctx + 'bookman/sale',
                dataType: 'JSON',
                cache: false,
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                  var data = res.data;
                  for (let key in data) {
                    str.push({
                      name: data[key].pubname,
                      value: data[key].salenumber
                    })
                  }
                  document.getElementById("sale").innerHTML +=
                      "<li>第一名：" + str[0].name + "&nbsp;&nbsp;&nbsp;售出：" + str[0].value + "本</li>" +
                      "<li>第二名：" + str[1].name + "&nbsp;&nbsp;&nbsp;售出：" + str[1].value + "本</li>" +
                      "<li>第三名：" + str[2].name + "&nbsp;&nbsp;&nbsp;售出：" + str[2].value + "本</li>"
                }
              });
            }

            message();
            function message() {
              var pubid = '';
              $('#sale').on('click', 'li', function () {
                let lastIndex = this.innerHTML.indexOf('&');
                pubid = this.innerHTML.substring(4, lastIndex);
                $('#ppp').html(pubid + ':');
                $.ajax({
                  type: "get",
                  url: ctx + 'bookIndent/sort/' + pubid,
                  dataType: 'JSON',
                  cache: false,
                  contentType: "application/json;charset=utf-8",
                  success: function (res) {
                    var data = res.data;
                    document.getElementById("pubid").innerHTML = '';
                    let sortNumber = 1;
                    for (let msg of data) {
                      document.getElementById("pubid").innerHTML += '<tr>' +
                          '<td>第 ' + sortNumber++ + ' 名</td>' +
                          '<td>' + msg.bookname + '</td>' +
                          '<td>' + msg.type + '</td>' +
                          '<td>' + msg.number + '</td>'
                    }
                    document.getElementById("ranking-see").style.display = 'initial';
                  }
                });
              });
            }

            function f4() {
              var str = [];
              $.ajax({
                type: "get",
                url: ctx + 'bookman/back',
                dataType: 'JSON',
                cache: false,
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                  var data = res.data;
                  for (let key in data) {
                    str.push({
                      name: data[key].pubname,
                      value: data[key].backnumber
                    })
                  }
                  document.getElementById("back").innerHTML +=
                      "<li>第一名：" + str[0].name + "&nbsp;&nbsp;&nbsp;退回：" + str[0].value + "本</li>" +
                      "<li>第二名：" + str[1].name + "&nbsp;&nbsp;&nbsp;退回：" + str[1].value + "本</li>" +
                      "<li>第三名：" + str[2].name + "&nbsp;&nbsp;&nbsp;退回：" + str[2].value + "本</li>"
                }
              });
            }

            f1();
            f2();
            f3();
            f4();
          })
        </script>
      </div>
    </div>
  </div>
</div>